<template>
  <radio-group class="li-radio" @change="radioChange">
    <label
      v-for="(item, index) of rangeList"
      :key="index"
      class="li-radio-item"
    >
      <radio
        :disabled="disabled"
        :value="item[rangeValue]"
        :checked="value == item[rangeValue]"
      />
      <text>{{ item[rangeKey] }}</text>
    </label>
  </radio-group>
</template>

<script>
export default {
  name: "LiRadio",
  props: {
    value: {},
    rangeList: Array,
    rangeKey: {
      type: String,
      default: "text",
    },
    rangeValue: {
      type: String,
      default: "id",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    radioChange(e) {
      // console.log(e,"e")
      this.$emit("input", e.detail.value);
      this.$emit("change", {
        detail: {
          value: e.detail.value,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.li-radio {
  display: flex;
  flex-wrap: wrap;
  .li-radio-item {
    text-wrap: nowrap;
    margin-right: 6px;
    margin-left: 6px;
    margin-bottom: 6px;
    margin-top: 6px;
    white-space: nowrap;
  }
}
</style>
